<template>
  <!-- 数据渲染原因：需在外层加个判断 -->
  <div id="SongMenu" v-if="menuDetail">
    <div class="detail">
      <img v-lazy="menuDetail.coverImgUrl" alt="" />
      <div class="right">
        <div class="title">
          <span>歌单</span>
          <span>{{ menuDetail.name }}</span>
        </div>
        <div class="artist">
          <img v-lazy="menuDetail.creator.avatarUrl" alt="" />
          <span class="nickname" @click="itemClick(menuDetail.creator.userId)">{{ menuDetail.creator.nickname }}</span>
          <span class="create-time">{{ menuDetail.createTime | dateFormat }}创建</span>
        </div>
        <MyButton :list="menuDetail.tracks"></MyButton>
        <div class="tag">
          <span>标签:</span>
          <span v-for="(item, index) in menuDetail.tags" :key="index">{{ item }}</span>
        </div>
        <div class="count">
          <span>歌曲:</span>
          <span>{{ menuDetail.trackCount }}</span>
          <span>播放量:</span>
          <span>{{ menuDetail.playCount | countFormat }}</span>
        </div>
        <el-collapse v-model="activeNames">
          <el-collapse-item title="简介:" name="1">
            <span class="word">{{ menuDetail.description }}</span>
          </el-collapse-item>
        </el-collapse>
      </div>
    </div>
    <Table :tableData="menuDetail.tracks" @refresh="getMenuDetail"></Table>
  </div>
</template>

<script>
import Table from '@/components/table/Table';
import MyButton from '@/components/mybutton/MyButton';
export default {
  data() {
    return {
      id: '',
      menuDetail: '',
      activeNames: ['1'],
    };
  },
  computed: {},
  created() {
    this.id = this.$route.params.lid;
    this.getMenuDetail();
    //存储请求歌单详情函数=>底部控制栏调用
    this.$store.commit('getMenuFunction', this.getMenuDetail);
  },
  components: { Table, MyButton },
  methods: {
    // 获取歌单详情
    async getMenuDetail() {
      const res = await this.$request('/playlist/detail', { id: this.id, timestamp: Date.now() });
      this.menuDetail = res.playlist;
    },
    //创建者点击
    itemClick(id) {
      this.$router.push('/userdetail/' + id);
    },
  },
  watch: {
    //因为同一组件复用的原因，需要监听歌单id变化再次请求歌单详情，
    '$route.params.lid'(lid) {
      if (!lid) return;
      this.menuDetail = '';
      setTimeout(() => {
        this.id = lid;
        this.getMenuDetail();
      }, 200);
    },
  },
};
</script>

<style scoped='scoped' lang='scss'>
.detail {
  display: flex;
  > img {
    @include image(200px, 5px);
    margin-right: 20px;
  }
  .right {
    > div {
      margin-bottom: 10px;
    }
    .title {
      display: flex;
      align-items: center;
      :first-child {
        @include tag;
      }
      :last-child {
        font-size: 22px;
        font-weight: 600;
      }
    }
    .artist {
      img {
        @include image(25px, 50%);
        vertical-align: middle;
      }
      .nickname {
        color: $userBlue;
        font-size: 12px;
        margin: 0 7px;
        cursor: pointer;
        &:hover {
          color: $userHover;
        }
      }
      .create-time {
        font-size: 12px;
        color: #919191;
      }
    }
    .tag {
      span {
        font-size: 13px;
        color: $userBlue;
        margin-right: 3px;
      }
      :first-child {
        color: #000;
      }
    }
    .count {
      span {
        font-size: 13px;
        margin-right: 3px;
      }
    }
    .word {
      color: #606266;
    }
  }
}
</style>